<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>学生成绩</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/grade.css">
    <link rel="stylesheet" href="../css/main.css">
</head>

<body>
    <div id="container">
        <div class="contain">
            <div class="header">
                <div class="header_title">成绩列表</div>
                <a onclick="history.back()">
                    <img src="../image/return.png" class="return">
                </a>
            </div>
            <div style="height: 40px;"></div>
            <div class="content" id="vue-root">
                <div class="grade ui-select">
                    <select id="classes" v-model="search.classesId">
                        <option :value="undefined">选择班级</option>
                        <option v-for="classes in classess" v-text="classes.name" :key="classes.id" :value="classes.id">
                        </option>
                    </select>
                </div>
                <div class="ui-select" style="margin-left: 2%">
                    <select id="courses" v-model="search.courseId">
                        <option :value="undefined">选择课程</option>
                        <option v-for="course in courses" v-text="course.name" :key="course.id" :value="course.id">
                        </option>
                    </select>
                </div>
                <div class="ui-select" style="margin-left: 2%">
                    <select id="issue" v-model="search.termId">
                        <option :value="undefined">选择期号</option>
                        <option v-for="term in terms" v-text="term.name" :key="term.id" :value="term.id"></option>
                    </select>
                </div>
                <div>
                    <input class="search" value="根据姓名搜索" v-model="search.studentName" />
                    <input class="button" type="button" value="搜索" @click="getData" />
                </div>
                <div class="content">
                    <table class="score">
                        <thead>
                            <tr>
                                <th>姓名</th>
                                <th>学号</th>
                                <th v-for="course in courses2" :key="course.index" v-text="course.name"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="row in table">
                                <td v-for="(cell,index) in row" v-text="cell"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script src="/scriptZIP/vue.min.js"></script>
    <script src="/scriptZIP/axios.min.js"></script>

    <script src="/js/common.js"></script>

    <script>
        var app = new Vue({
            el: '#vue-root',
            data: {
                classess: [],
                courses: [],
                terms: [],
                list: [],
                search: {},
                students: {},
                table: [],
                courses1: {},
                courses2: []
            },
            created: function () {
                axios.get('/t/classes').then(function (res) {
                    this.classess = res.data;
                }.bind(this));
                axios.get('/t/score/term').then(function (res) {
                    this.terms = res.data;
                }.bind(this));
                axios.get('/t/courses').then(function (res) {
                    this.courses = res.data;
                }.bind(this));
            },
            methods: {
                getData: function () {
                    axios.get('/t/score', {
                        params: this.search
                    }).then(function (res) {
                        this.list = res.data;
                        this.courses1 = this.getCourses();
                        this.students = this.getStudents();
                        this.table = this.getTable();
                    }.bind(this));
                },
                getCourses: function () {
                    var o = {};
                    var i = 0;
                    this.courses2 = [];
                    this.list.forEach(function (it) {
                        var id = it.courseId;
                        if (id in o) return;
                        o[id] = {
                            index: i,
                            name: it.courseName
                        };
                        this.courses2.push(o[id]);
                        i++;
                    }.bind(this));
                    return o;
                },
                getStudents: function () {
                    var o = {};
                    var i = 0;

                    this.list.forEach(function (it) {
                        var id = it.studentId;
                        if (id in o) return;
                        o[id] = {
                            index: i,
                            name: it.studentName,
                            no: it.studentNo
                        };
                        i++;
                    });
                    return o;
                },
                getTable: function () {
                    var count = Object.keys(this.students).length;
                    var cols = Object.keys(this.courses1).length + 2;
                    var tbl = Array(count);
                    for (var i = 0; i < count; i++)tbl[i] = Array(cols);
                    var rows = {};
                    this.list.forEach(function (it) {
                        var student = this.students[it.studentId];
                        var row = tbl[student.index];
                        if (!(it.studentId in rows)) {
                            row[0] = student.name;
                            row[1] = student.no;
                            rows[it.studentId] = it;
                        }
                        row[this.courses1[it.courseId].index + 2] = it.score;
                    }.bind(this));
                    return tbl;
                }
            }
        });

    </script>

</body>

</html>